<style>
 table{
     border: 1px solid gray;
     border-collapse: collapse;
     border-spacing: 0;
 }
 th,td{
     padding: 8px 16px;
     border: 1px solid gray;
     text-align: left;
 }
 th{
     background-color: honeydew;
     color: #555555;
     font-weight: 500;
 }

</style>


<div id="app">

    <div v-if='books.length>0'>

        <table>
            <thead>
                <th></th>
                <th>书籍名称</th>
                <th>出版日期</th>
                <th>价格</th>
                <th>购买数量</th>
                <th>操作</th>
            </thead>
            <tbody>
                <tr v-for='(item,index) in books'>
                    <td>{{index}} </td>
                    <td>{{item.name}} </td>
                    <td>{{item.date}} </td>
                    <td>${{item.price.toFixed(2)}} </td>
                    <td><button @click='decrease(item)' :disabled='item.count <=1'>
                            -
                        </button>{{item.count}}<button @click='increase(item)'>+</button> </td>
                    <td><button @click='remove(index)'>删除</button></td>
                </tr>

            </tbody>
        </table>
        <div>
            <h2>总计：{{summary}} </h2>
        </div>
    </div>
    <div v-else>
        购物车为空
    </div>

</div>

<script src="../js/vue.js"></script>
<script src="./main.js"></script>